<template>
  <div id="app">
    <!-- 头部 -->
    <TopBar :key="TopbaKey"></TopBar>
    <!-- 导航 -->
    <Header></Header>
    <router-view @updataTopBar="updataTopBarkeyFn"></router-view>
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 登录模态框 -->
    <!-- 需要一个状态控制login是否显示 -->
    <!-- 该状态对个组件都需要使用到 因此存储在vuex中 -->
    <login v-show="changLogin"></login>
    <!-- 提示框组件 -->
    <Toast v-show="isToastShow"></Toast>
  </div>
</template>



<script>

import TopBar from './components/TopBar.vue'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
// import axios from "axios"
// import axios from "@/request/request"
import { jingpinAPT, UserProfilesAPI } from "@/request/api"
import Toast from './components/Toast.vue'
import login from './components/login.vue'

import { mapState } from 'vuex'

export default {
  data() {
    return {
      TopbaKey: 0
    }
  },
  watch: {
    // 方法二
    "$route.path": {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.TopbaKey++
        }
      }
    }
  },
  methods: {
    updataTopBarkeyFn() {
      this.TopbaKey++
    }
  },
  components: {
    TopBar,
    Header,
    Footer,
    login,
    Toast
  },

  computed: {
    ...mapState({
      // 属性:(state)=>state.模块名称.属性名
      changLogin: (state) => state.inshowloginmodel.isShowlogin,
      isToastShow: state => state.isToastShow.isToastShow
    })
  },
  async created() {
    // 缺点:
    // 1:服务器url地址都一样,每个组件调用时都 需要复制过去
    // 解决:可以在request新建一个request.js,统一管理
    // 2:一旦接口地址发生变化,所有调用了接口的组件都需要修改
    // 解决:在request新建一个api.js 统一管理接口
    // 3:每次请求时都需要手动编写 comfig携带token(多个组件携带代码重复)
    // 4:优化then()写法.async+await



    // axios .get("/products/recommend").then
    // jingpinAPT().then((res) => {
    //   console.log("res2:", res);//在network中看,请求地址,响应结果
    // },
    //   (err) => {
    //     console.log(err);
    //   }
    // );

    // let res = await jingpinAPT()
    // console.log("res:", res);

    // let user = await UserProfilesAPI();
    // console.log("用户信息", user);
  }
}

</script>
<style lang="less">
#app {
  // background-color: aqua;
}
</style>
